<template>
	<z-paging ref="paging" @query="queryList" :refresherEnabled="true" :loadingMoreEnabled="false"
		:auto="false" :hideEmptyView="true">
		<view slot="top">
			<z-nav-bar backState="1000">订单详情</z-nav-bar>
		</view>
		
		<view v-if="orderInfo">
			<view class="bg-white u-p-30">
				<u-steps :current="currentStep" direction="column">
					<!-- 待支付 -->
					<template v-if="orderInfo.orderStatus >= parseInt(orderStatusEnum.pending)">
						<u-steps-item title="待支付" v-if="orderInfo.orderStatus == orderStatusEnum.pending">
							<view slot="desc">
								<view class="u-m-t-10 u-flex">
									<text>请于</text>
									<u-count-down :time="timestamp" @change="handleCountDownChange"></u-count-down>
									<text>内付款，超时订单将自动关闭</text>
								</view>
							</view>
						</u-steps-item>
						<u-steps-item title="交易取消" v-else-if="orderInfo.orderStatus == orderStatusEnum.canceled">
							<view slot="desc" style="opacity: 0.5;">
								<view class="u-m-t-10">
									<text>超时支付</text>
								</view>
							</view>
						</u-steps-item>
						<u-steps-item title="已支付" v-else>
							<view slot="desc" style="opacity: 0.5;">
								<view class="u-m-t-10">
									<text>{{orderInfo.payTime}}</text>
								</view>
							</view>
						</u-steps-item>
					</template>
					
					<!-- 待发货 -->
					<template v-if="orderInfo.orderStatus >= parseInt(orderStatusEnum.processed)">
						<u-steps-item title="待发货" v-if="orderInfo.orderStatus == orderStatusEnum.processed">
							<view slot="desc" style="opacity: 0.5;">
								<view class="u-m-t-10">
									<text>卖家正在准备出货</text>
								</view>
							</view>
						</u-steps-item>
						<u-steps-item title="已退款" v-else-if="orderInfo.orderStatus == orderStatusEnum.refund">
							<view slot="desc" style="opacity: 0.5;">
								<view class="u-m-t-10">
									<text>{{orderInfo.refundTime}}</text>
								</view>
							</view>
						</u-steps-item>
						<u-steps-item title="卖家已发货" v-else>
							<view slot="desc" style="opacity: 0.5;">
								<view class="u-m-t-10">
									<text>{{orderInfo.sendTime}}</text>
								</view>
							</view>
						</u-steps-item>
					</template>
					<!-- 待收货 -->
					<template v-if="orderInfo.orderStatus >= parseInt(orderStatusEnum.shipped)">
						<u-steps-item title="商品已发货">
							<view slot="desc" >
								<view class="u-m-t-10" style="opacity: 0.5;">
									<text>商品已发货，可通过快递单号查询物流进度</text>
								</view>
								<view class="u-m-t-10" style="opacity: 0.5;" v-for="(item, index) in orderInfo.orderDeliveries" :key="index">
									<text>快递单号：{{item.deliveryNo}}</text>
									<text class="u-p-l-10 u-p-r-10">|</text>
									<text>{{item.deliveryName}}</text>
								</view>
								<view class="u-m-t-30">
									<text class="u-font-32">{{address}}</text>
								</view>
								<view class="u-m-t-20" style="opacity: 0.5;">
									<text>{{orderInfo.contacts}}</text>
									<text class="u-m-l-10">{{orderInfo.contactNumber}}</text>
								</view>
								<view class="u-m-t-10 u-flex">
									<view class="u-flex-7">
									</view>
									<view class="u-flex-5">
										<u-button @click="handleCopy(orderInfo.orderDeliveries[0].deliveryNo)" shape="circle" :customStyle="{'backgroundColor':'#FFB143', 'color': '#FFFFFF'}">复制快递单号</u-button>								
									</view>
								</view>
							</view>
						</u-steps-item>
					</template>
					
					<!-- 已退款 -->
					<template v-if="orderInfo.orderStatus == parseInt(orderStatusEnum.return)">
						<u-steps-item title="已退货">
							<view slot="desc" style="opacity: 0.5;">
								<view class="u-m-t-10">
									<text>{{orderInfo.returnTime}}</text>
								</view>
							</view>
						</u-steps-item>
					</template>
					
					<!-- 已完成 -->
					<template v-if="orderInfo.orderStatus == orderStatusEnum.complete || orderInfo.orderStatus == orderStatusEnum.comment">
						<u-steps-item title="交易完成">
							<view slot="desc" style="opacity: 0.5;">
								<view class="u-m-t-10">
									<text>买家已收货，交易完成</text>
								</view>
							</view>
						</u-steps-item>
					</template>
					
				</u-steps>
			</view>
			
			<view class="u-m-t-30 bg-white  u-p-30">
				<view class="u-flex" v-for="(sku, index) in orderInfo.details" :key="index">
					<view class="u-flex-3 ">
						<image :src="sku.coverImage" style="width: 170rpx; height: 170rpx; border-radius: 20rpx;"></image>
					</view>
					
					<view class="u-flex-9 u-p-l-30">
						<view class="u-flex">
							<view class="u-flex-9 u-line-1">
								<text>{{sku.spuTitle}}</text>
							</view>
							<view class="u-flex-3 text-bold u-text-right">
								<text class="u-font-38">{{sku.point}}</text>
							</view>
						</view>
						<view class="u-flex u-font-24 u-m-t-6" style="opacity: 0.5;">
							<view class="u-flex-11 u-flex u-flex-wrap">
								<text>数量</text>
								<text class="u-m-l-10">×</text>
								<text>{{sku.count}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="u-m-t-30 bg-white u-p-30">
				<view class="u-flex">
					<view class="u-flex-1">
						<text>商品总价</text>
					</view>
					<view class="u-flex-1 u-text-right text-bold">
						<text class="u-font-36 u-m-r-10">{{orderInfo.totalPoint}}</text>
						<text>积分</text>
					</view>
				</view>
				<view class="u-flex u-m-t-20">
					<view class="u-flex-1">
						<text>订单运费</text>
					</view>
					<view class="u-flex-1 u-text-right text-bold">
						<text>￥</text>
						<text class="u-font-36">0.00</text>
					</view>
				</view>
				<view class="u-flex u-m-t-20">
					<view class="u-flex-1">
						<text>实际付款</text>
					</view>
					<view class="u-flex-1 u-text-right text-orange text-bold">
						<text class="u-font-36 u-m-r-10">{{orderInfo.payPoint}}</text>
						<text>积分</text>
					</view>
				</view>
				
				<view class="u-flex u-m-t-60">
					<view class="u-flex-3">
						<text>订单编号</text>
					</view>
					<view class="u-flex-9 u-flex u-flex-end" @click="handleCopy(orderInfo.id)">
						<view style="opacity: 0.5;">{{orderInfo.id}}</view>
						<view class="u-m-l-10 u-m-r-10">|</view>
						<text class="text-bold">复制</text>
					</view>
				</view>
				<view class="u-flex u-m-t-20" v-if="orderInfo.orderStatus >= parseInt(orderStatusEnum.shipped)">
					<view class="u-flex-3">
						<text>快递单号</text>
					</view>
					<view class="u-flex-9 u-flex u-flex-end" v-for="(item, index) in orderInfo.orderDeliveries" :key="index">
						<view style="opacity: 0.5;">{{item.deliveryNo}}</view>
						<view class="u-m-l-10 u-m-r-10">|</view>
						<text class="text-bold">{{item.deliveryName}}</text>
					</view>
				</view>
				<view class="u-flex u-m-t-20" v-if="orderInfo.orderStatus >= parseInt(orderStatusEnum.processed)">
					<view class="u-flex-3">
						<text>付款时间</text>
					</view>
					<view class="u-flex-9 u-flex u-flex-end">
						<text style="opacity: 0.5;">{{orderInfo.createTime}}</text>
					</view>
				</view>
			</view>
			
		</view>
	</z-paging>
</template>

<script>
	import {jumpTypeEnum, orderStatusEnum, deliveryOrderTypeEnum} from '@/common/const.js'
	import {getPointOrderInfo} from '@/api/point.js'
	export default{
		data(){
			return{
				deliveryOrderTypeEnum,
				orderStatusEnum,
				requestParams:{},
				orderInfo:null,
				currentStep:0,
				timestamp: 60
			}
		},
		onLoad(e) {
			this.init(e)
		},
		computed:{
			
			/**
			 * 收货地址
			 */
			address(){
				if(this.orderInfo){
					return `${this.orderInfo.province}${this.orderInfo.city}${this.orderInfo.area}${this.orderInfo.address}`
				}
				return ''
			},
		},
		methods:{
			/**
			 * 初始化
			 */
			init(e){
				this.requestParams.orderId = e.orderId
				this.reload()
			},
			
			/**
			 * 列表重新加载
			 */
			reload(){
				setTimeout(()=>{
					// 重新加载
					this.$refs.paging.reload()
				},100)
			},
			
			queryList(pageNo, pageSize){
				getPointOrderInfo(this.requestParams).then(res=>{
					this.orderInfo = res.data
					this.orderInfo.details.forEach(detail=>{
						// 获取sku封面
						let images = detail.bannerImages.split(',')
						if(!detail.hasOwnProperty('coverImage')){
							this.$set(detail, 'coverImage', images[0])
						} else {
							detail.coverImage = images[0]
						}
					})
					this.getCurrentStep()
					this.$refs.paging.complete([]);
				}).catch(res => {
					//如果请求失败写this.$refs.paging.complete(false);
					//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			},
			
			/**
			 * 获取
			 */
			getCurrentStep(){
				switch(this.orderInfo.orderStatus){
					// 待支付
					case orderStatusEnum.pending:
						this.currentStep = 0
						this.timestamp = parseInt(this.orderInfo.residuePayTimeSpan) 
						// 如果状态是待支付，但是支付时间为0，变更状态为关闭交易
						if(this.timestamp <= 0){
							this.orderInfo.orderStatus = orderStatusEnum.canceled
						}
						break;
					// 已取消
					case orderStatusEnum.canceled:
						this.currentStep = 0
						break;
					// 待发货
					case orderStatusEnum.processed:
						this.currentStep = 1
						break;
					// 退款
					case orderStatusEnum.refund:
						this.currentStep = 1
						break;
					// 待收货
					case orderStatusEnum.shipped:
						this.currentStep = 2
						break;
					// 退货
					case orderStatusEnum.return:
						this.currentStep = 3
						break;
					// 已完成
					case orderStatusEnum.complete:
						this.currentStep = 3
						break;
					// 待评价
					case orderStatusEnum.comment:
						this.currentStep = 3
						break;
				}
			},
			
			/**
			 * 复制到剪切板
			 */
			handleCopy(value){
				uni.setClipboardData({
				    data: value, // e是你要保存的内容
				    success: function () {
							uni.showToast({
								title:'复制成功',
								icon:'none'
							})
				    }
				})
			},
			
			
		}
	}
</script>

<style>
</style>